<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">

		</view>
		<!-- #endif -->
		<view class="top">
			<view class="u-flex cl_000 u-p-20 views1">
				<!-- <view class="u-w-260" @click='$u.route("/pages/home/city")'>
					<u-icon name="map" size="35" color='#ffffff'></u-icon>
					<text class="u-m-l-5 u-m-r-10 cl_FFF">{{location.name}}</text>
					<u-icon name="arrow-down" size="25" color='#ffffff'></u-icon>
				</view> -->
				<view class="u-w-700">
					<u-search border-color='#FC3533' :show-action="false"
						search-icon='https://www.sqkjkj.vip/wxImg/common/img/search.png' placeholder="搜索商家名称"
						v-model="params.search" @blur='custom'></u-search>
				</view>
			</view>
			<view class="u-font-48 u-m-t-50 cl_FFF u-p-20">附近商家列表</view>
			<view class="">
				<view class="u-p-20">
					<view class="u-h-20">
					</view>
					<block v-for="(item,index) in list" :key="index">
						<view class="brb_F4F4F4 u-p-b-20 u-m-t-20" v-if="!item.is_ad">
							<view class="u-flex u-row-between u-p-20">
								<view class="u-flex" @click="$u.route(`/pages/shopmassage/shopmassage?num=${item.id}`)">
									<u-image :src="item.logo" mode="aspectFill" border-radius="20" width="94rpx"
										height='94rpx'>
									</u-image>
									<view class="u-m-l-24">
										<view class="u-flex">
											<u-image v-if="item.is_bond==1"
												src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/img2.png"
												mode="aspectFill" width="28rpx" height='28rpx'></u-image>
											<view class="u-m-l-10 u-weight">{{item.name}}</view>
										</view>
										<view class="u-font-26 u-m-t-20">共<text
												style="color:#FF5502FF ;">{{item.sales}}</text>销量</view>
									</view>
								</view>
								<view class="cl_848484FF">
									<u-icon name='map'></u-icon>
									<text>{{item.distance || 0}}km</text>
								</view>
							</view>
							<view class="u-p-10 u-flex ">
								<view class="u-flex">
									<u-image src="https://www.sqkjkj.vip/wxImg/clear/img2.png" mode="aspectFill"
										width="30rpx" height='30rpx'>
									</u-image>
									<view @click="$com.makePhoneCall(item.mobile)" class="u-m-l-10 u-font-26"><text
											class="cl_848484FF">电话:</text>{{item.mobile}}</view>
								</view>
								<view class="u-flex u-m-l-20" v-if="item.wechat">
									<u-image src="https://www.sqkjkj.vip/wxImg/clear/wx.png" mode="aspectFill"
										width="30rpx" height='30rpx'>
									</u-image>
									<view @click="$com.setClipboardData(item.wechat)"
										class="u-m-l-10 u-font-26 u-m-r-20"><text
											class="cl_848484FF">微信:</text>{{item.wechat}}
									</view>
								</view>
							</view>
							<view class="u-flex u-m-t-10 u-p-10">
								<u-image src="https://www.sqkjkj.vip/wxImg/clear/img4.png" mode="aspectFill"
									width="30rpx" height='30rpx'></u-image>
								<view class="u-m-l-10 u-font-26 u-m-r-20"><text class="cl_848484FF">地址:</text>
									{{item.area}}{{item.address}}
								</view>
							</view>
							<view class="">
								<scroll-view scroll-x="true">
									<view class="" style="overflow: auto; width: 700rpx;">
										<view class="u-flex u-m-t-20">
											<view class="u-m-r-20" style="width: 154rpx;"
												v-for="(good,gindex) in item.goods_list" :key="gindex"
												@click="$u.route(`${good.type==1?`/pages/home/paymassage?num=${good.spu}`:`/pages/home/shopmassage?num=${good.spu}`}`)">
												<u-image :src='good.imgs[0]' border-radius="20" mode="aspectFit"
													width="154rpx" height='153rpx'></u-image>
												<view class="text-cut u-font-26">{{good.name}}</view>
												<view class="u-font-28" style="color:#EB3818FF;">￥{{good.price}}</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="" style="height: 200px;" v-else>
							<base-ad :adInfo="item" :key="status" ></base-ad>
						</view>
						
					</block>
				</view>
				<!-- 加载更多 -->
				<u-loadmore :status="status" icon-type="circle" margin-top="20" margin-bottom="20" />
			</view>
			<view class="u-h-100">
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				location: {},
				// 商品数据
				params: {
					page: 1,
					page_size: 20,
					search: '',
					latitude: 0,
					longitude: 0
				},
				list: [],
				status: 'loadmore',
			}
		},
		onLoad() {

		},
		async onShow() {
			// #ifdef H5
			this.params.latitude = 34.751901
			this.params.longitude = 113.6663
			this.clear()
			this.nearby_list()
			// #endif
			// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY
			await this.$com.getLocation().then(async loc => {
				this.params.latitude = loc.latitude
				this.params.longitude = loc.longitude
				this.clear()
				this.nearby_list()
			})
			// #endif


		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			if (this.list.length >= 20) {
				this.nearby_list();
			}
		},
		methods: {
			clear() {
				this.params.page = 1
				this.list = []
			},
			// 附近门店
			nearby_list() {
			    const params = this.params
				// #ifdef MP-WEIXIN
				params.client = '小程序'
				//  #endif
				
				// #ifndef MP-WEIXIN
				params.client = 'app'
				// #endif
				this.$api.nearby_list(this.params, res => {
					if (res.data.code == 1) {
						if (res.data.data.shop_list) {
							if (res.data.data.shop_list.length < 20) {
								this.status = 'nomore';
							} else {
								this.params.page = this.params.page + 1;
								this.status = 'loadmore';
							}
							this.list = this.list.concat(res.data.data.shop_list);
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			// 点击搜索时
			custom() {
				this.clear()
				this.nearby_list()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FBFBFB !important;
	}

	.top {
		background: url('https://www.sqkjkj.vip/wxImg/clear/img.png') no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 920rpx;
	}
</style>